<template>
	<view class="">
		<u-navbar title="专利详情" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="">
			<view class="flex-col space-y-10 section_3">
			  <view>
			    <text class="font_2">{{info.patentName}}</text>
			    <!-- <text class="font_2">置一种工业景观鱼用喂养装置</text> -->
			  </view>
			  <view class="flex-row space-x-20">
			    <view class="flex-col items-center text-wrapper_2"><text class="text_5">{{['','发明','实用','外观'][info.patentType] || '发明'}}</text></view>
			    <view class="flex-col items-center text-wrapper"><text class="text_6">实质审查</text></view>
			  </view>
			</view>
			
			<view class="flex-col space-y-26 section_4">
			  <view class="flex-row">
			    <text class="font_3">专利号：</text>
			    <text class="font_4 text_7">{{info.patentNo}}</text>
			  </view>
			  <!-- <view class="flex-row">
			    <text class="font_3">案件状态：</text>
			    <text class="font_5">{{info.caseStatus}}</text>
			  </view> -->
			 <!-- <view class="flex-row">
			    <text class="font_3">近期应缴费：</text>
			    <text class="font_6 text_8">1,200.00 元</text>
			  </view>
			  <view class="flex-row">
			    <text class="font_3">缴费截止日期：</text>
			    <text class="font_4 text_9">2023-05-26</text>
			  </view> 
			  <view class="flex-row">
			    <text class="font_3">监管日期：</text>
			    <text class="font_4 text_10">2022-03-26</text>
			  </view> -->
			  <view class="flex-row">
			    <text class="font_3">申请日期：</text>
			    <text class="font_4 text_11">{{info.applicationDate}}</text>
			  </view>
			  <!-- <view class="flex-row">
			    <text class="font_3">更新时间：</text>
			    <text class="font_4 text_12">2022-05-13 18:00</text>
			  </view> -->
			</view>
			<view class="flex justify-center">
				<u-tabs :list="patentInfos" @click="tabChange" lineWidth="45"  :activeStyle="{
					color: '#5372fc'}"
				:inactiveStyle="{
					color: '#666'}"
				lineColor="#5372fc"
				></u-tabs>
			</view>
			<view class="content">
				<!-- <component :is="componment"></component> -->
				<law v-if="componment == 'law'" :patentNo="patentNo" :type="search" :patentLegalStatus="patentLegalStatus"></law>
				<!-- <change v-if="componment == 'change'"></change> -->
				<descripation :type="1" v-if="componment == 'descripation'" :info="saveRowData" ></descripation>
				<cost v-if="componment == 'cost'" :toPatentFee="toPatentFee" :alreadyPatentFee="alreadyPatentFee" ></cost>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFeeDatails,getLegalDatails,getDescDatails} from '@/api/indexData.js'
	import descripation from '../../components/descripationInfos.vue';
	import change from '../../components/changeInfos.vue';
	import law from '../../components/lawInfos.vue';
	import cost from '../../components/costInfos.vue';
	export default {
		components:{descripation,change,law,cost},
		data() {
			return {
				patentLegalStatus:[],
				saveRowData:{},
				patentNo:'',
				toPatentFee:[],
				alreadyPatentFee:[],
				info:{},
				patentInfos:[
					{name:'著录信息'},
					{name:'费用信息'},
					{name:'法律信息'},
					// {name:'变更历史'},
				],
				componment:'descripation',
				componmentInfos:{
					'著录信息':'descripation',
					'费用信息':'cost',
					'法律信息':'law',
					// '变更历史':'change'
				},
				condition:{
					flag:'1',
					level:'0',
				}
			};
		},
		onLoad(option) {
			if(option.info){
				this.info = option.info ? JSON.parse(option.info) : {}
				this.getInitData();
			}
		},
		methods:{
			getInitData(){
				this.condition.patentType = this.info.patentType;
				this.condition.patentNo = this.info.patentNo;
				this.condition.publicationCode = this.info.publicationCode;

				getFeeDatails(this.condition).then(res => {
					if(res.code === 200) {
						this.alreadyPatentFee = res.data.payFee;
						this.toPatentFee = res.data.unpayFee;
					}
				})
				getLegalDatails(this.condition).then(res => {
					if(res.code === 200) {
						this.patentLegalStatus = res.data.legalStatus;
						this.patentNo = res.data.patentNo;
					}
				})
				getDescDatails(this.condition).then(res => {
					if(res.code === 200) {
						this.saveRowData = res.data;
					}
				})
			},
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			
			submit(){
				
			},
			tabChange({index,name}){
				this.componment = this.componmentInfos[name]; 
			}
		}
	}
</script>

<style lang="scss" scoped>
.space-y-10 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 10rpx;
  }
  .font_2 {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    line-height: 44rpx;
	font-weight: bold;
    color: #000;
  }
  .space-x-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 20rpx;
    }
    .text-wrapper_2 {
      margin-bottom: 4rpx;
      padding: 2rpx 0 4rpx;
      background-color: #ffffff;
      border-radius: 4rpx;
      width: 70rpx;
      height: 26rpx;
      border: solid 1rpx #2f87f2;
      .text_5 {
        color: #2f87f2;
        font-size: 19rpx;
        font-family: Microsoft YaHei;
        line-height: 18rpx;
      }
    }
    .text-wrapper {
      padding: 7rpx 0 6rpx;
      background-color: #ececec;
      border-radius: 16rpx;
      width: 140rpx;
      height: 32rpx;
      .text_6 {
        color: #ffa529;
        font-size: 20rpx;
        font-family: Microsoft YaHei;
        line-height: 19rpx;
      }
    }
  }
}
.section_3 {
  padding: 23rpx 29rpx 28rpx;
  background-color: #ffffff;
}

.space-y-26 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 26rpx;
  }
  .font_3 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #777777;
  }
  .font_4 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 21rpx;
    color: #444444;
  }
  .text_7 {
    margin-top: 3rpx;
  }
  .font_5 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #444444;
  }
  .font_6 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 24rpx;
    color: #444444;
  }
  .text_8 {
    margin-top: 3rpx;
  }
  .text_9 {
    margin-top: 3rpx;
  }
  .text_10 {
    margin-top: 3rpx;
  }
  .text_11 {
    margin-top: 3rpx;
  }
  .text_12 {
    margin-top: 3rpx;
  }
}
.section_4 {
  margin-top: 19rpx;
  padding: 29rpx 30rpx 37rpx;
  background-color: #ffffff;
}

.content {
	margin-top: 34rpx;
}
</style>